<template>
  <Layout>
    <h1>博客列表</h1>
    <div>
      <el-card shadow="hover" v-for="(item,index) in blogs" :key="'p'+index" style="margin-bottom: 20px">
        <div slot="header">
          <el-row>
            <el-col :span="16">
              <span>
                  <a style="text-decoration:none;cursor:pointer" @click="goDetails(item.id)">
                      <i class="el-icon-edit-outline"></i>&nbsp;&nbsp;
                    {{ item.title }}
                  </a>
              </span>
            </el-col>
            <el-col :span="8">
              <div style="text-align: right;">
                <el-button @click="" style="padding: 3px 0" type="text" icon="el-icon-share"></el-button>
                <el-button @click="" style="padding: 3px 0" type="text" icon="el-icon-edit"></el-button>
                <el-button @click="" style="padding: 3px 0" type="text" icon="el-icon-delete"></el-button>
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="font-size: 0.9rem;line-height: 1.5;color: #606c71;">
          最近更新 {{ item.updateTime | utcToLocal }}
        </div>
        <div style="font-size: 1.1rem;line-height: 1.5;color: #303133;padding: 10px 0px 0px 0px">
          {{ item.description }}
        </div>
      </el-card>
      <div style="text-align: center">
        <Pager :info="$page.allBlog.pageInfo" />
      </div>
    </div>
  </Layout>
</template>

<page-query>
query($page:Int) {
  allBlog(perPage:5,page:$page) @paginate {
    pageInfo{
      totalPages
      currentPage
    }
    edges{
      node{
        title
        url
        description
        id
        createTime
        updateTime
      }
    }
  }
}
</page-query>

<script>
// $page.allIndex.edges[0].node.title
import { Pager } from 'gridsome'

export default {
  name: "Blog",
  components:{
    Pager
  },
  metaInfo: {
    title: '博客列表'
  },
  computed: {
    blogs() {
      return this.$page.allBlog.edges.map(v => v.node)
    }
  },
  methods: {
    goDetails(id) {
      console.log(id)
    }
  }
}
</script>

<style scoped>

</style>
